<template>
  <transition name="fade-down">
    <BeButton v-if="visible" :style="backTopStyle" @click="handleClick">
      <BeIcon icon="local:arrow-up-to-line" />
    </BeButton>
  </transition>
</template>
<script lang="ts" setup>
import type { BackTopProps } from './useBackTop'
import { computed } from 'vue'
import { useBackTop } from './useBackTop'

// 定义 Props 接口并扩展 BackTopProps
interface Props extends BackTopProps {}

// 设置组件选项
defineOptions({ name: 'BackTop' })

// props
const props = withDefaults(defineProps<Props>(), {
  bottom: 20,
  isGroup: false,
  right: 24,
  target: '',
  visibilityHeight: 200
})

const backTopStyle = computed(() => ({
  bottom: `${props.bottom}px`,
  right: `${props.right}px`
}))

const { handleClick, visible } = useBackTop(props)
</script>
